{include file="common/header"}
<div id="app" v-cloak>
    <el-container class="el-layout">
        <el-tabs v-model="tab" :tab-position="position">
			<el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.title" :name="String(item.path)"></el-tab-pane>
        </el-tabs>
        <el-container>
            <div class="el-config">
                <iframe :src="admin_url(tab)"></iframe>
            </div>
        </el-container>
    </el-container>
</div>
<script>
    var menu = {:json_encode($menu)};
	new Vue({
	    el: '#app',
	    data() {
	        return {
	            position: document.body.clientWidth > 768 ? 'left' : 'top',
	            tabs: menu,
	            tab: window.location.hash === "" ? menu[0]['path'] : window.location.hash.replace('#', ''),
	        }
	    },
	    mounted () {
            let self = this;
            window.onresize = function(){
                self.position = document.body.clientWidth > 768 ? 'left' : 'top';
            };
        },
        methods: {
            admin_url(link = '') {
                return admin_url(link);
            }   
        },
	    watch: {
	        tab(name) {
	            // 锚点
    		    let path = parent.parentVm.path.split('#');
    		    parent.parentVm.path = path[0] + '#' + name;
	        }
	    }
	})
</script>
{include file="common/footer"}